<include file="public/header" />
<!--当前页面私有样式-->
<link rel="stylesheet" href="/html/static/css/swiper.css">
<link href="/html/static/css/product_info.css" rel="stylesheet">
<script src="/html/static/js/swiper.min.js"></script>

<div class="public_back">
    <a class="back" onclick="history.go(-1)" ></a>
    <h2 class="title">{$info.name}</h2>
    <a class="search"></a>
</div>

<div class="main_section">
    <div class="swiper-container product_banner">
        <div class="swiper-wrapper">

            <foreach name="$info.album" item="vo">
                <div class="swiper-slide">
                    <img src="{$vo}" />
                </div>
            </foreach>

        </div>
        <div class="swiper-pagination"></div>
    </div>
    <script>
        var swiper = new Swiper('.swiper-container', {
            pagination: '.swiper-pagination',
            paginationType: 'fraction',
            autoplay: 2500,
            loop:true
        });
    </script>
    <div class="section1">
        <div class="top">
            <h2 class="title">{$info.name}</h2>
            <div class="share">
                <img src="/html/static/images/share.jpg" />
                <span>分享</span>
            </div>
        </div>
        <div class="bottom">
            <div class="price">
                <p>
                    <span>￥</span>
                    <strong>{$info.price}</strong>
                </p>
                <a>￥{$info.discount_price}</a>
            </div>
            <div class="info">
                <span>销量：15</span>
                <span>库存：{$info.stock}</span>
            </div>
        </div>
    </div>

    <div class="section2">
        <span>服务内容</span>
        <foreach name="sever" item="vo">
            <a>{$vo.name}</a>
        </foreach>

    </div>

   <!-- <div class="section3 choose">请选择 <span class="guige">规格</span></div>

    <div class="blank_10"></div>

    <div class="section4">
        <div class="top">
            <div class="left">
                <h2>商品评价</h2>
                <span>（94条）</span>
            </div>
            <div class="right">
                <p>好评率98%</p>
            </div>
        </div>
        <div class="list">
            <div class="item">
                <div class="info">
                    <img class="touxiang" src="/html/static/picture/touxiang.jpg" />
                    <div class="xingji">
                        <h3 class="nike">云***8</h3>
                        <ul class="xin">
                            <img src="/html/static/images/xing.jpg" />
                            <img src="/html/static/images/xing.jpg" />
                            <img src="/html/static/images/xing.jpg" />
                            <img src="/html/static/images/xing.jpg" />
                            <img src="/html/static/images/xing.jpg" />
                        </ul>
                    </div>
                </div>
                <div class="desc">2019-03-31 规格：65g*2支</div>
                <div class="content">
                    <p>这个牙膏很好用！</p>
                </div>
            </div>
            <div class="item">
                <div class="info">
                    <img class="touxiang" src="/html/static/picture/touxiang.jpg" />
                    <div class="xingji">
                        <h3 class="nike">云***8</h3>
                        <ul class="xin">
                            <img src="/html/static/images/xing.jpg" />
                            <img src="/html/static/images/xing.jpg" />
                            <img src="/html/static/images/xing.jpg" />
                            <img src="/html/static/images/xing.jpg" />
                            <img src="/html/static/images/xing.jpg" />
                        </ul>
                    </div>
                </div>
                <div class="desc">2019-03-31 规格：65g*2支</div>
                <div class="content">
                    <p>这个牙膏很好用！</p>
                </div>
            </div>
        </div>
    </div>
-->
    <div class="blank_10"></div>

    <div class="section5">
        <div class="top">图文详情</div>
        <div class="singlepage">
            {$info.content}
        </div>
    </div>
</div>

<div class="bottom_caozuo">
    <div class="left">
        <a>
            <img src="/html/static/images/home.png" />
            <span>首页</span>
        </a>
        <a>
            <img src="/html/static/images/shoucang.png" />
            <span>收藏</span>
        </a>
    </div>
    <div class="right">
        <button class="cart choose">加入购物车</button>
        <button class="buy choose">立即购买</button>
    </div>
    <input type="hidden" id="goods_id" value="{$info.id}">
</div>

<div class="public_mask"></div>
<div class="public_up">
    <div class="public_top">
        <h2 class="public_title">选择规格</h2>
        <a class="public_close close"></a>
    </div>
    <div class="public_main">
        <div class="guige_1">
            <img src="/html/static/picture/cart.jpg" class="pic"/>
            <div class="content">
                <div class="price">
                    <a>￥</a>
                    <strong>570</strong>
                </div>
                <div class="kucun">库存<span>500</span>件</div>
            </div>
        </div>
        <div class="guige_2">
            <h2 class="title">规格</h2>
            <ul class="list">
                <span class="active">默认</span>
                <span data-attrid="1">750ML*1瓶装</span>
                <span data-attrid="2">750ML*1瓶装</span>
                <span data-attrid="3">750ML*1瓶装</span>
            </ul>
        </div>
        <div class="guige_3">
            <span class="title">数量</span>
            <div class="caozuo">
                <button class="jian">-</button>
                <input type="text" class="num" value="1" readonly="readonly">
                <button class="jia">+</button>
            </div>
        </div>
    </div>
    <div class="public_button">
        <button class="confirm">确定</button>
    </div>
</div>
<script>
    $('.guige_2 .list span').click(function(){
        $(this).addClass('active');
        $(this).siblings('span').removeClass('active');

        console.log($(this).html())
    });
    $('.guige_3 .caozuo button.jian').click(function(){
        var num = Number($(this).siblings('input').val());
        if (num <= 1) {
            return false;
        } else {
            num = num - 1;
            $(this).siblings('input').val(num);
        }
        return false;
    });
    $('.guige_3 .caozuo button.jia').click(function(){
        var num = Number($(this).siblings('input').val());
        num = num + 1;
        $(this).siblings('input').val(num);
        return false;
    });

    function getCanshu(){
        var guige;
        $('.guige_2 .list').each(function(){
            guige = $(this).find('.active').attr("data-attrid");
        })
        var num = $('.num').val();

        let  goods_id =$('#goods_id').val();

        val = guige + ';' + num;
        console.log(val)
        $.ajax({
            type: 'post',
            url: "{:url('/Order/actionOrder')}",
            data : {spc_id:guige,number:num,goods_id:goods_id},
            dataType: 'json',
            success: function (data) {

                if (data.code == 200) {
                    layer.msg(data.msg, {icon: 1,time:100});
                    obj.del();
                } else {
                    layer.alert(data.msg, {icon: 2});
                }
            }
        })
    }


    var val;
    $('.confirm').click(function(){
        getCanshu();
        $('.guige').html(val);
        closeMask();
    });
    $('.choose').click(function(){
        openMask();
    });
    $('.public_mask,.close').click(function(){
        closeMask();
        $('.yhqInp').val(val);
    });
    function openMask(){
        $('.public_mask').fadeIn(100);
        $('.public_up').animate({'bottom':'0px'});
    }
    function closeMask(){
        $('.public_mask').fadeOut(100);
        $('.public_up').animate({'bottom':'-380px'});
    }
</script>


<script>
    $(function(){
        function getHeight(){
            var winHeight = $(window).outerHeight(true);
            var topHeight = $('.public_back').outerHeight(true);
            var bottomHeight = $('.bottom_caozuo').outerHeight(true);
            var mainHeight = winHeight - topHeight - bottomHeight;
            $('.main_section').css('height',mainHeight + 'px');
        }
        getHeight();
        window.onresize = function(){
            getHeight();
        }
    });
</script>
</body>
</html>
